<!DOCTYPE html>
<html xml:lang="en-US" lang="en-US">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133296718-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-133296718-1');
    </script>
    <link rel="preconnect" href="https://fonts.gstatic.com">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="images/webpage/icon.png">

    <title>Princess Connect! Re:Dive - Quest Helper | priconne-quest-helper</title>
    <meta name="title" content="Princess Connect! Re:Dive - Quest Helper | priconne-quest-helper"/>

    <!-- META DATA -->
    <meta name="description" content="Quest Choosing Assistance and Project Management for the Game 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）.">
    <meta name="author" content="S'pugn">
    <meta name="keywords" content="Princess Connect Re:Dive, プリンセスコネクト! Re:Dive, Quest Helper, S'pugn, 公主连结">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- OPEN GRAPH / FACEBOOK META DATA -->
    <meta property="og:title" content="Princess Connect! Re:Dive - Quest Helper | priconne-quest-helper"/>
    <meta property="og:description" content="Quest Choosing Assistance and Project Management for the Game 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）."/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="https://raw.githubusercontent.com/Expugn/priconne-quest-helper/master/images/webpage/icon.png"/>
    <meta property="og:image:width" content="64"/>
    <meta property="og:image:height" content="64"/>
    <meta property="og:url" content="https://expugn.github.io/priconne-quest-helper/"/>
    <meta property="og:locale" content="en_US"/>
    <meta property="og:locale:alternate" content="ja_JP"/>
    <meta property="og:locale:alternate" content="ko_KR"/>
    <meta property="og:locale:alternate" content="zh_CN"/>

    <!-- TWITTER META DATA -->
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@eSpugn"/>
    <meta name="twitter:creator" content="@eSpugn"/>
    <meta name="twitter:title" content="Princess Connect! Re:Dive - Quest Helper | priconne-quest-helper"/>
    <meta name="twitter:description" content="Quest Choosing Assistance and Project Management for the Game 'Princess Connect! Re:Dive' （プリンセスコネクト! Re:Dive）."/>

    <!-- SCRIPTS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="vendor/modernizr/modernizr-custom.js"></script> <!-- WEBP CHECK -->
    <script src="scripts/priconne-data.js"></script>
    <script src="scripts/priconne-quest-helper.js"></script>

    <!-- CSS STYLE SHEETS -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="vendor/toastr/toastr.css">
    <link rel="stylesheet" href="css/webpage.css">
    <link rel="stylesheet" href="css/spritesheet.css">
    <link rel="stylesheet" href="css/data.css">

    <!-- PRELOAD -->
    <link rel="preload" href="images/webpage/adv_mask_C.png" as="image">
</head>

<body class="fancy-body no-js">
<div id="page-loading">
    <div id="page-cover"></div>
    <div id="loading-div" class="center-div">
        <i id="miyako"></i>
        <div id="loading-text">Miyako is coming for your pudding.<br>Please wait.</div>
    </div>
    <script>
        // REMOVE .no-js AS AN INDICATOR THAT JAVASCRIPT IS SUPPORTED
        $("body").toggleClass("no-js");

        // MAKE MIYAKO RUN
        setTimeout(function () {
            document.getElementById("miyako").classList.add("run");
        }, 750);
    </script>
</div>

<noscript>
    <h4 id="javascript-warning">
        <span style="color: orangered;">Pudding doesn't taste good without JavaScript...</span>
        <br>
        <span style="color: #e3cfcb;">Princess Connect Re:Dive Quest Helper</span> cannot function without JavaScript.
        <br>
        <span style="color: #ffdf73;">Please enable JavaScript in your browser to continue.</span>
    </h4>
</noscript>

<!-- TITLE ( PRINCESS CONNECT RE:DIVE - QUEST HELPER ) -->
<div id="title-div" class="title-background" onclick="">
    <div id="title-text-div">
        <h1 class="title main_title">
            <translate text="system.title">
                Princess Connect! Re:Dive
            </translate>
        </h1>
        <h2 id="sub-title" class="title sub_title">
            <translate text="system.subtitle">
                Quest Helper
            </translate>
        </h2>
    </div>
</div>

<!-- NAVIGATION BAR -->
<div id="navigation-bar">
    <button id="navigation-items" class="is-open" type="button" onclick="webpage.navigation.items()">
        <i class="webpage webpage-items navigation-bar-image"></i>
        <translate class="navigation-bar-text" text="items_tab.tab_title">
            Items
        </translate>
    </button>
    <button id="navigation-presets" type="button" onclick="webpage.navigation.presets()">
        <i class="webpage webpage-presets navigation-bar-image"></i>
        <translate class="navigation-bar-text" text="presets_tab.tab_title">
            Presets
        </translate>
    </button>
    <button id="navigation-projects" type="button" onclick="webpage.navigation.projects()">
        <i class="webpage webpage-projects navigation-bar-image"></i>
        <translate class="navigation-bar-text" text="projects_tab.tab_title">
            Projects
        </translate>
    </button>
    <button id="navigation-settings" type="button" onclick="webpage.navigation.settings()">
        <i class="webpage webpage-settings navigation-bar-image"></i>
        <translate class="navigation-bar-text" text="settings_tab.tab_title">
            Settings
        </translate>
    </button>
    <button id="navigation-other" type="button" onclick="webpage.navigation.other()">
        <i class="webpage webpage-other navigation-bar-image"></i>
        <translate class="navigation-bar-text" text="other_tab.tab_title">
            Other
        </translate>
    </button>
    <select id="language-option" onchange="webpage.language.load()" disabled>
        <option value="en-US">English</option>
        <option value="ja-JP">日本語</option>
        <option value="ko-KR">한국어</option>
        <option value="zh-CN">简体中文</option>
    </select>
</div>

<!-- ITEMS TAB -->
<div id="items-container">
    <div id="common-div">
        <h2 class="text-color_common rarity-button collapsible">
            <translate text="items_tab.common_title">Common</translate>
        </h2>
        <div id="common-item-content" class="collapsible-content">
            <!-- COMMON ITEMS GET ADDED BELOW -->
            <div id="common-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="copper-div">
        <h2 class="text-color_copper rarity-button collapsible">
            <translate text="items_tab.copper_title">Copper</translate>
        </h2>
        <div id="copper-item-content" class="collapsible-content">
            <!-- COPPER ITEMS GET ADDED BELOW -->
            <div id="copper-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="silver-div">
        <h2 class="text-color_silver rarity-button collapsible">
            <translate text="items_tab.silver_title">Silver</translate>
        </h2>
        <div id="silver-item-content" class="collapsible-content">
            <!-- SILVER ITEMS GET ADDED BELOW -->
            <div id="silver-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="gold-div">
        <h2 class="text-color_gold rarity-button collapsible">
            <translate text="items_tab.gold_title">Gold</translate>
        </h2>
        <div id="gold-item-content" class="collapsible-content">
            <!-- GOLD ITEMS GET ADDED BELOW -->
            <div id="gold-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="purple-div">
        <h2 class="text-color_purple rarity-button collapsible">
            <translate text="items_tab.purple_title">Purple</translate>
        </h2>
        <div id="purple-item-content" class="collapsible-content">
            <!-- PURPLE ITEMS GET ADDED BELOW -->
            <div id="purple-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="red-div">
        <h2 class="text-color_red rarity-button collapsible">
            <translate text="items_tab.red_title">Red</translate>
        </h2>
        <div id="red-item-content" class="collapsible-content">
            <!-- RED ITEMS GET ADDED BELOW -->
            <div id="red-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="misc-div">
        <h2 class="text-color_misc rarity-button collapsible">
            <translate text="items_tab.miscellaneous_title">Misc.</translate>
        </h2>
        <div id="misc-item-content" class="collapsible-content">
            <!-- MEMORY PIECE / MISC ITEMS GET ADDED BELOW -->
            <div id="misc-item-table" class="center-div item-table_div"></div>
        </div>
    </div>

    <div id="requested-div">
        <h2 class="item-table_category-title">
            <translate text="items_tab.requested_items_title">Requested Items</translate>
        </h2>
        <div class="request-info">
            <!-- REQUESTED ITEMS (FULL EQUIPMENT) GETS ADDED BELOW -->
            <div id="requested-item-table" class="center-div">
                <!-- STARTING TIP FOR REQUESTED ITEMS -->
                <h4 class="tip center-div">
                    <span style="color: navajowhite"><translate text="items_tab.requested_items_help_1">
                        The items and amount you selected from the categories above will be displayed here.
                    </translate></span>
                    <br><br>
                    <translate text="items_tab.requested_items_help_2">
                        Clicking on the category title will open or close a table of all the items in that rarity class.
                    </translate>
                </h4>
            </div>
        </div>
    </div>
</div>

<!-- PRESETS TAB -->
<div id="presets-container" hidden>
    <div id="character-preset-div">
        <h2 class="category-title">
            <translate text="presets_tab.character_presets">Character Presets</translate>
        </h2>
        <div id="character-preset-settings">
            <!-- BULK MODE BUTTON -->
            <div class="center-div">
                <button id="preset-bulk-mode-button" onclick="presets.toggle_bulk_mode()"><translate text="presets_tab.bulk_mode">Bulk Mode</translate></button>
            </div>
            <!-- SELECT LIST OF CHARACTERS FOUND IN data/character_data.json -->
            <div class="center-div">
                <select id="character-preset-list-select" onchange="presets.update_details()"></select>
                <button id="preset-search-button" onclick="presets.toggle_grid_display()">
                    <img-webp id="preset-lens-image" image_folder="webpage" file_name="lens" src_prefix=""></img-webp>
                </button>
            </div>
            <br>
            <!-- SELECTED CHARACTER IMAGE AND NAME -->
            <div class="center-div">
                <img-webp id="preset-character-image" class="presets_unit-icon" image_folder="unit_icon" file_name="Placeholder" src_prefix=""></img-webp><br>
                <label id="preset-character-name-label" class="presets_unit-info"></label>
            </div>
            <div id="preset-bulk-settings">
                <!-- MIN RANK TO MAX RANK OPTIONS -->
                <div class="center-div">
                    <div>
                        <translate id="presets-min-rank-text" text="presets_tab.minimum_rank">Min Rank</translate><br>
                        <input
                                id="preset-character-min-rank-input"
                                class="item-input"
                                type="number"
                                min="1"
                                max="1"
                                value="1"
                                disabled
                                onchange="presets.change_min_rank()">
                    </div>
                    <translate id="presets-to-text" text="presets_tab.to">to</translate>
                    <div>
                        <translate id="presets-max-rank-text" text="presets_tab.maximum_rank">Max Rank</translate><br>
                        <input
                                id="preset-character-max-rank-input"
                                class="item-input"
                                type="number"
                                min="1"
                                max="1"
                                value="1"
                                disabled
                                onchange="presets.change_max_rank()">
                    </div>
                </div>
                <br>
                <!-- LOAD PRESET BUTTON AND LOAD PRESET AND SAVE PROJECT BUTTON -->
                <div class="center-div">
                    <button id="preset-character-load-button" type="button" disabled onclick="presets.load()"><translate text="presets_tab.load_items_button">Load Items</translate></button><br><br>
                    <button id="preset-character-load-and-create-project-button" type="button" disabled onclick="presets.load_and_save()"><translate text="presets_tab.load_items_and_create_project_button">Load Items and Create Project</translate></button>
                </div>

                <!-- ITEM TABLE OVERWRITE WARNING -->
                <h3 class="category-title presets_overwrite-warning">
                <translate text="presets_tab.overwrite_warning">
                    Currently selected items will be replaced<br>
                    when the <span style="color: lightpink">Load Item</span> button is pressed.
                </translate>
                </h3>
            </div>
            <div id="preset-single-settings" hidden>
                <div id="preset-items-div" class="center-div grayscale">
                    <div>
                        <button id="preset-item-1" class="item-sprite_button preset-item-button item-sprite" onclick="presets.add_preset_item(this.title);">
                            <img-webp class="preset-plus-img" style="opacity: 0;" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                        </button>
                        <button id="preset-item-2" class="item-sprite_button preset-item-button item-sprite" onclick="presets.add_preset_item(this.title);">
                            <img-webp class="preset-plus-img" style="opacity: 0;" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                        </button>
                    </div>
                    <div>
                        <button id="preset-item-3" class="item-sprite_button preset-item-button item-sprite" onclick="presets.add_preset_item(this.title);">
                            <img-webp class="preset-plus-img" style="opacity: 0;" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                        </button>
                        <button id="preset-item-4" class="item-sprite_button preset-item-button item-sprite" onclick="presets.add_preset_item(this.title);">
                            <img-webp class="preset-plus-img" style="opacity: 0;" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                        </button>
                    </div>
                    <div>
                        <button id="preset-item-5" class="item-sprite_button preset-item-button item-sprite" onclick="presets.add_preset_item(this.title);">
                            <img-webp class="preset-plus-img" style="opacity: 0;" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                        </button>
                        <button id="preset-item-6" class="item-sprite_button preset-item-button item-sprite" onclick="presets.add_preset_item(this.title);">
                            <img-webp class="preset-plus-img" style="opacity: 0;" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                        </button>
                    </div>
                </div>
                <div id="preset-item-settings" class="center-div">
                    <span id="preset-items-rank-label" class="grayscale text-color_common" onclick="presets.open_rank_select()">Rank 1</span>
                    <select id="preset-items-rank-select" onchange="presets.close_rank_select()" hidden></select>
                    <br><br>
                    <div id="preset-items-rank-buttons">
                        <button id="preset-items-previous-rank-button" onclick="presets.previous_rank()" disabled>
                            <span class="preset-item-rank-button-text">&laquo; Rank</span>
                        </button>
                        <button id="preset-items-next-rank-button" onclick="presets.next_rank()" disabled>
                            <span class="preset-item-rank-button-text">Rank &raquo;</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div id="character-preset-grid" hidden>
            <div class="center-div">
                <button class="pointer-cursor" onclick="presets.toggle_grid_display()"><translate text="presets_tab.cancel">Cancel</translate></button>
                <br><br>
                <div id="preset-grid-display" class="center-div"></div>
            </div>
        </div>
        <br>
    </div>
</div>

<!-- PROJECTS TAB -->
<div id="projects-container" hidden>
    <div id="local-storage-warning" hidden>
        <!-- LOCAL STORAGE WARNING ; DISPLAYS IF LOCAL STORAGE ISN'T AVAILABLE -->
        <br>
        <table class="center-table">
            <tr><th>
                    <label style="color: red; font-weight: bolder;">
                        <translate text="projects_tab.localstorage_warning">
                            Your browser does not support LocalStorage.<br>
                            Projects, Blacklist, Data Importing/Exporting, and Settings Saving have been disabled.
                        </translate>
                    </label>
            </th></tr>
        </table>
    </div>

    <!-- PROJECT SELECT AND OPTIONS -->
    <div id="projects-div">
        <br>

        <!-- PROJECT SAVING | PROJECT NAME INPUT ; SAVE BUTTON -->
        <div>
            <label for="project-name-input"><translate text="projects_tab.project_name_label">Project Name:</translate> </label>
            <input id="project-name-input" type="text" name="project-name">
            <button id="project-save-button" type="button" onclick="projects.save()"><translate text="projects_tab.save_project_button">Save Project</translate></button>
        </div>

        <br>

        <!-- PROJECT OPTIONS | SAVED PROJECT SELECT ; LOAD ; ADD/SUB ITEMS ; PRIORITIZE ; DELETE ; COMPLETE ; CLEAR ITEM TABLES -->
        <div>
            <label for="saved-projects-select">
                <translate text="projects_tab.select_saved_project_label">Select Saved Project:</translate>
            </label>
            <!-- SAVED PROJECTS ARE ADDED BELOW -->
            <select id="saved-projects-select" onchange="projects.update()">
                <option value="[All Projects...]">
                    <translate text="projects_tab.all_projects_select_option">[All Projects...]</translate>
                </option>
            </select>
            <br>
            <button id="project-load-button" type="button" onclick="projects.load()">
                <translate text="projects_tab.load_project_button">Load Project</translate>
            </button>
            <button id="project-add-button" disabled type="button" onclick="projects.add()">
                <translate text="projects_tab.add_project_items_button">Add Project Items</translate>
            </button>
            <button id="project-sub-button" disabled type="button" onclick="projects.sub()">
                <translate text="projects_tab.subtract_project_items_button">Subtract Project Items</translate>
            </button>
            <button id="prioritize-project-button" disabled type="button" onclick="projects.prioritize(true)">
                <translate text="projects_tab.prioritize_project_button">Prioritize Project</translate>
            </button>
            <button id="deprioritize-project-button" disabled hidden type="button" onclick="projects.prioritize(false)">
                <translate text="projects_tab.deprioritize_project_button">Deprioritize Project</translate>
            </button>
            <br><br><br>
            <button id="project-delete-button" type="button" onclick="projects.remove()">
                <translate text="projects_tab.delete_project_button">Delete Project</translate>
            </button>
            <button id="project-complete-button" disabled type="button" onclick="projects.complete()">
                <translate text="projects_tab.complete_project_button">Complete Project</translate>
            </button>
            <br><br><br>
            <button type="button" onclick="data_display.item_table.clear(); data_display.build();">
                <translate text="projects_tab.clear_item_tables_button">Clear Item Tables</translate>
            </button>
        </div>

        <br><br>

        <!-- BLACKLIST OPTIONS | SAVE ; LOAD ; CLEAR ; DELETE -->
        <div>
            <button id="blacklist-save-button" type="button" onclick="projects.blacklist.save()">
                <translate text="projects_tab.save_blacklist_button">Save Blacklist</translate>
            </button>
            <button id="blacklist-load-button" type="button" onclick="projects.blacklist.init()" title="There is no saved blacklist.">
                <translate text="projects_tab.load_saved_blacklist_button">Load Saved Blacklist</translate>
            </button>
            <button id="blacklist-clear-button" type="button" onclick="projects.blacklist.clear()">
                <translate text="projects_tab.clear_blacklist_button">Clear Blacklist</translate>
            </button>
            <button id="blacklist-delete-button" type="button" onclick="projects.blacklist.remove()">
                <translate text="projects_tab.delete_blacklist_button">Delete Blacklist</translate>
            </button>
        </div>
    </div>
    <br>
</div>

<!-- SETTINGS TAB -->
<div id="settings-container" hidden>
    <!-- SETTINGS -->
    <div id="settings-div">
        <br>

        <label for="quest-shown-amt">
            <translate text="settings_tab.amount_of_quests_shown">Amount of Quests Shown (10 - 999):</translate>
        </label>
        <input id="quest-shown-amt"
               class="item-input"
               type="number"
               min="10"
               max="999"
               value="10"
               onchange="settings.change_quest_shown_amt()">

        <br><br>

        <label for="sort-ascending-quest-list">
            <translate text="settings_tab.sort_by_ascending_quest_list">Sort by Ascending: Quest List (Chapter 1 -> Chapter 2 -> ...)</translate>
        </label>
        <input id="sort-ascending-quest-list"
               type="checkbox"
               name="ascending_sort: quest_list"
               value="ascending_sort_quest_list"
               checked
               onchange="settings.toggle_ascending_sort_quest_list()">

        <br>

        <label for="sort-ascending-quest-score">
            <translate text="settings_tab.sort_by_ascending_quest_score">Sort by Ascending: Quest Score (0.5 -> 0.75 -> ...)</translate>
        </label>
        <input id="sort-ascending-quest-score"
               type="checkbox"
               name="ascending_sort: quest_score"
               value="ascending_sort_quest_score"
               onchange="settings.toggle_ascending_sort_quest_score()">

        <br><br>

        <label for="hide-quest-score">
            <translate text="settings_tab.hide_quest_score">Hide Quest Score</translate>
        </label>
        <input id="hide-quest-score"
               type="checkbox"
               name="hide quest score"
               value="hide_quest_score"
               checked
               onchange="settings.toggle_hide_quest_score()">

        <br><br>

        <label for="min-quest-chapter">
            <translate text="settings_tab.lowest_quest_chapter_displayed">Lowest Quest Chapter Displayed:</translate>
        </label>
        <input id="min-quest-chapter"
               type="number"
               min="1"
               max="1"
               value="1"
               onchange="settings.change_min_quest_chapter()">

        <br>

        <label for="max-quest-chapter">
            <translate text="settings_tab.highest_quest_chapter_displayed">Highest Quest Chapter Displayed:</translate>
        </label>
        <input id="max-quest-chapter"
               type="number"
               min="1"
               max="1"
               value="1"
               onchange="settings.change_max_quest_chapter()">
        <div style="display: inline-block;">
            <label for="auto-max-quest-chapter">
                <translate text="settings_tab.max" style="margin-left: 25px;">Max</translate>
            </label>
            <input id="auto-max-quest-chapter"
                   type="checkbox"
                   onchange="settings.toggle_auto_max_quest_chapter()">
        </div>

        <br><br>

        <label for="filter-all-quests">
            <translate text="settings_tab.show_all_quests">Show All Quests</translate>
        </label>
        <input id="filter-all-quests" type="radio" name="filter-option" value="all-quests" onclick="settings.change_quest_filter()" checked>
        <br>
        <label for="filter-normal-quests">
            <translate text="settings_tab.show_normal_quests">Show Normal Quests</translate>
        </label>
        <input id="filter-normal-quests" type="radio" name="filter-option" value="normal-quests" onclick="settings.change_quest_filter()">
        <br>
        <label for="filter-hard-quests">
            <translate text="settings_tab.show_hard_quests">Show Hard Quests</translate>
        </label>
        <input id="filter-hard-quests" type="radio" name="filter-option" value="hard-quests" onclick="settings.change_quest_filter()">
        <br>
        <label for="filter-very-hard-quests">
            <translate text="settings_tab.show_very_hard_quests">Show Very Hard Quests</translate>
        </label>
        <input id="filter-very-hard-quests" type="radio" name="filter-option" value="very-hard-quests" onclick="settings.change_quest_filter()">

        <br><br>

        <label>
            <translate text="settings_tab.ignore_item_rarity_in_recipe">Ignore Item Rarity in Recipe:</translate>
        </label><br>
        <button id="ignore-button-common" class="item-sprite_button webpage webpage-Placeholder_Common" onclick="settings.toggle_ignored_rarity('common')"></button>
        <button id="ignore-button-copper" class="item-sprite_button webpage webpage-Placeholder_Copper" onclick="settings.toggle_ignored_rarity('copper')"></button>
        <button id="ignore-button-silver" class="item-sprite_button webpage webpage-Placeholder_Silver" onclick="settings.toggle_ignored_rarity('silver')"></button>
        <button id="ignore-button-gold" class="item-sprite_button webpage webpage-Placeholder_Gold" onclick="settings.toggle_ignored_rarity('gold')"></button>
        <button id="ignore-button-purple" class="item-sprite_button webpage webpage-Placeholder_Purple" onclick="settings.toggle_ignored_rarity('purple')"></button>
        <button id="ignore-button-red" class="item-sprite_button webpage webpage-Placeholder_Red" onclick="settings.toggle_ignored_rarity('red')"></button>

        <br><br>

        <label for="display-drop-percent">
            <translate text="settings_tab.display_drop_percent">Display Drop Percent</translate>
        </label>
        <input id="display-drop-percent" type="radio" name="display-option" value="drop-percent" onclick="settings.change_display_option()" checked>
        <br>
        <label for="display-amount-required">
            <translate text="settings_tab.display_amount_required">Display Amount Required</translate>
        </label>
        <input id="display-amount-required" type="radio" name="display-option" value="amount-required" onclick="settings.change_display_option()">

        <br><br>

        <label for="equipment-data-type">
            <translate text="settings_tab.equipment_data_type_label">Equipment Data Type:</translate>
        </label>
        <select id="equipment-data-type" onchange="settings.change_equipment_data()">
            <option id="equipment-data-type-current-option" value="equipment-data-current">Current Equipment Data (After 2019.08.31)</option>
            <option id="equipment-data-type-legacy-option" value="equipment-data-legacy">Legacy Equipment Data (Before 2019.08.31)</option>
        </select>

        <br><br>

        <div id="setting-saving-div">
            <button id="save-settings-button" type="button" onclick="settings.save_settings()">
                <translate text="settings_tab.save_settings_button">Save Settings</translate>
            </button><br><br>
            <button id="delete-settings-button" type="button" onclick="settings.delete_settings()">
                <translate text="settings_tab.delete_settings_button">Delete Settings</translate>
            </button><br><br>
            <button id="reset-settings-button" type="button" onclick="settings.reset_settings()">
                <translate text="settings_tab.reset_settings_button">Reset Settings</translate>
            </button><br><br>
            <button id="read-settings-button" type="button" onclick="settings.print_settings()">
                <translate text="settings_tab.display_saved_settings_button">Read Saved Settings</translate>
            </button><br><br>
        </div>
    </div>
</div>

<!-- OTHER TAB -->
<div id="other-container" hidden>
    <div id="data-div">
        <!-- OTHER PAGE HYPERLINKS -->
        <h4>
            <translate text="other_tab.other_pages_title">Other Pages</translate>
        </h4>

        <!-- pages/quest-data/ -->
        <a href="pages/quest-data/" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-quest_data"></i>
                <translate class="hyperlink-text" text="other_tab.quest_data">Quest Data</translate>
            </div>
        </a>

        <!-- pages/recipe-data/ -->
        <a href="pages/recipe-data/" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-recipe_data"></i>
                <translate class="hyperlink-text" text="other_tab.recipe_data">Recipe Data</translate>
            </div>
        </a><br>

        <!-- pages/character-data/ -->
        <a href="pages/character-data/" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-character_data"></i>
                <translate class="hyperlink-text" text="other_tab.character_data">Character Data</translate>
            </div>
        </a>

        <!-- pages/statistics/ -->
        <a href="pages/statistics/" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-statistics"></i>
                <translate class="hyperlink-text" text="other_tab.statistics">Statistics</translate>
            </div>
        </a><br>

        <!-- CHANGELOG -->
        <a href="https://github.com/Expugn/priconne-quest-helper/blob/master/CHANGELOG.md" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-changelog"></i>
                <translate class="hyperlink-text" text="other_tab.changelog">Changelog</translate>
            </div>
        </a>

        <!-- WIKI -->
        <a href="https://github.com/Expugn/priconne-quest-helper/wiki" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-wiki"></i>
                <translate class="hyperlink-text" text="other_tab.help">Help (Wiki)</translate>
            </div>
        </a><br>

        <!-- SIMPLE MODE / FANCY MODE | ONE LINK HIDDEN DEPENDING ON THE CURRENT MODE -->
        <a id="simple-page-link" href="../priconne-quest-helper/#simple" onclick="window.location.hash = '#simple'; window.location.reload();" style="display: inline;">
            <div class="hyperlink-image">
                <i class="webpage webpage-simple_mode"></i>
                <translate class="hyperlink-text" text="other_tab.simple_mode">Simple Mode</translate>
            </div>
        </a>
        <a id="fancy-page-link" href="../priconne-quest-helper/" onclick="window.location.hash = ''; window.location.reload();" style="display: inline;">
            <div class="hyperlink-image">
                <i class="webpage webpage-fancy_mode"></i>
                <translate class="hyperlink-text" text="other_tab.fancy_mode">Fancy Mode</translate>
            </div>
        </a><br>
        <br><br>

        <!-- HYPERLINKS TO OTHER TOOLS -->

        <!-- priconne-shiritori -->
        <a href="https://expugn.github.io/priconne-shiritori/" target="_blank">
            <div class="hyperlink-image">
                <i class="webpage webpage-priconne-shiritori_icon"></i>
                <span class="hyperlink-text app-hyperlink_text">priconne<br>shiritori<br>( JP )</span>
            </div>
        </a>
        <br><br>
    </div>

    <br>

    <!-- DATA MANAGEMENT -->
    <div id="data-management-div">
        <h4>
            <translate text="other_tab.data_management_title">Data Management</translate>
        </h4>
        <input id="export-data-button" type="button" onclick="location.href='pages/export-data/';" target="_blank" value="Export Saved Data"/><br>
    </div>

    <br>

    <div id="title-background-div">
        <h4>
            <translate text="other_tab.title_background_title">Title Background</translate>
        </h4>

        <select id="title-background-select" onchange="title_background.change_background()"></select><br>
        <div id="custom-title-input" hidden>
            <label for="custom-title-url-input"><translate text="other_tab.custom_title_background_url">Image URL: </translate></label>
            <input id="custom-title-url-input" type="text" name="custom-title-url" onchange="title_background.change_background()">
        </div>
        <label>
            <translate text="other_tab.disable_title_background_hover">Disable Title Background Hover</translate>
            <input id="title-hover-disable" type="checkbox" onchange="title_background.save_background_data()">
        </label>
    </div>
</div>

<!-- REQUIRED INGREDIENTS (EQUIPMENT FRAGMENTS) -->
<div id="required-div">
    <h2 class="item-table_category-title">
        <translate text="system.required_ingredients_title">Required Ingredients</translate>
    </h2>
    <button id="inventory_open-button" onclick="inventory.toggle_inventory_modal()" hidden>
        <img-webp id="inventory_crate-img" image_folder="webpage" file_name="Inventory_Crate" src_prefix=""></img-webp>
    </button>
    <div class="request-info">
        <!-- REQUIRED INGREDIENTS FROM REQUESTED ITEMS DISPLAYED BELOW -->
        <div id="required-ingredient-table" class="center-div">
            <!-- STARTING TIP FOR REQUIRED INGREDIENTS -->
            <h4 class="tip center-div">
                <translate style="color: navajowhite" text="system.required_ingredients_help_1">
                    The items and amount you need to create your requested items will be displayed here.
                </translate>
                <br><br>
                <translate text="system.required_ingredients_help_2">
                    Tapping on an item displayed in here will toggle if it is <span style="color: darkorange">disabled</span> or not.
                </translate>
                <br><br>
                <translate text="system.required_ingredients_help_3">
                    <span style="color: orange">Disabled</span> items will <span style="color: salmon; font-style: italic">not</span> appear in the <span style="color: yellow">Recommended Quest</span> list.
                </translate>
            </h4>
        </div>
    </div>
</div>

<!-- RECOMMENDED QUESTS -->
<div id="recommended-div">
    <h2 class="item-table_category-title">
        <translate text="system.recommended_quest_title">Recommended Quests</translate>
    </h2>
    <!-- RECOMMENDED QUESTS DISPLAY -->
    <div id="recommended-quest-div" class="request-info">
        <!-- RECOMMENDED QUESTS FOUND FROM REQUIRED INGREDIENTS DISPLAYED BELOW -->
        <div id="recommended-quest-table" class="center-div">
            <!-- STARTING TIP FOR RECOMMENDED QUESTS -->
            <h4 class="tip center-div">
                <translate style="color: navajowhite" text="system.recommended_quest_help_1">
                    Suggested quests to complete will be shown here once you start selecting items.
                </translate>
                <br><br>
                <translate text="system.recommended_quest_help_2">
                    Quests are sorted by <span style="color: yellow">the amount of items you can collect from the quest</span> that you need, starting from chapter 1.
                </translate>
                <br><br>
                <translate text="system.recommended_quest_help_3">
                    Up to <span style="color: #6DFF7F">ten</span> quests will be shown at a time by default.
                </translate>
            </h4>
        </div>
    </div>
</div>
</body>

<footer>
    <!-- AUTHOR CREDITS -->
    <p class="footer notranslate">
        Made with <span style="color:#ff4d4d">❤</span> by S'pugn
        <i class="webpage webpage-HAhaa footer"></i>
    </p>
    <!-- TRANSLATOR CREDITS (APPEARS ONLY ON NON-ENGLISH LANGUAGES) -->
    <p class="footer">
        <span id="translator-footer" class="notranslate"></span>
    </p>

    <!-- LAST QUEST UPDATE TEXT ; DETERMINED BY SETTING IN scripts/language.js -->
    <p class="footer">
        <translate text="system.last_quest_update">
            Last Quest Update: <span id="update-date-span" style="color: #6DFF7F;">...</span>
        </translate>
    </p>

    <!-- SOCIAL MEDIA LINKS -->
    <p class="footer">
        <a href='https://ko-fi.com/E1E21KEV4' target='_blank'><img height='36' style='border:0;height:36px;position: relative;top:2px;right:5px;' src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
        <a href="https://github.com/Expugn/priconne-quest-helper" target="_blank">
            <i class="webpage webpage-GitHub-Mark"></i>
        </a>
    </p>
</footer>

<!-- FOCUSED ITEM POPUP -->
<div id="focused-item-popup" hidden>
    <i id="focused-item-image"></i><br>
    <img-webp id="lens-image" image_folder="webpage" file_name="lens" src_prefix=""></img-webp>
</div>

<!-- INVENTORY MODAL -->
<div id="inventory_modal" hidden>
    <div id="inventory_modal_close-button">
        <div id="inventory_modal_close-button-text">&times;</div>
    </div>
    <div id="inventory_modal-dialog">
        <div id="inventory_modal_toolbar">
            <translate id="inventory_title" text="inventory.title">Inventory</translate>
            <div style="display: inline-block;">
                <button id="inventory_toolbar-button_list" class="inventory_modal_toolbar-button is-open" onclick="inventory.switch_mode(this.id);">
                    <img-webp class="inventory_modal_toolbar-button-img" image_folder="webpage" file_name="Inventory_Crate" src_prefix=""></img-webp>
                </button>
                <button id="inventory_toolbar-button_add" class="inventory_modal_toolbar-button" onclick="inventory.switch_mode(this.id);">
                    <img-webp class="inventory_modal_toolbar-button-img" image_folder="webpage" file_name="Inventory_Crate" src_prefix=""></img-webp>
                    <img-webp id="inventory_modal_toolbar-button-plus-img" image_folder="webpage" file_name="plus" src_prefix=""></img-webp>
                </button>
                <button id="inventory_toolbar-button_remove" class="inventory_modal_toolbar-button" onclick="inventory.switch_mode(this.id);">
                    <img-webp class="inventory_modal_toolbar-button-img" image_folder="webpage" file_name="Inventory_Crate" src_prefix=""></img-webp>
                    <img-webp id="inventory_modal_toolbar-button-remove-img" image_folder="webpage" file_name="minus" src_prefix=""></img-webp>
                </button>
                <button id="inventory_toolbar-button_delete" class="inventory_modal_toolbar-button" onclick="inventory.delete_all_button()">
                    <img-webp class="inventory_modal_toolbar-button-img" image_folder="webpage" file_name="Inventory_Crate" src_prefix=""></img-webp>
                    <img-webp id="inventory_modal_toolbar-button-delete-img" image_folder="webpage" file_name="red_x" src_prefix=""></img-webp>
                </button>
            </div>
        </div>

        <div id="inventory_content_list" class="center-div"></div>
        <div id="inventory_catalog" class="center-div" hidden></div>
        <div id="inventory_catalog-add-prompt" class="center-div" hidden>
            <div id="inventory_add-prompt_options" style="margin-top: 30px; margin-bottom: 10px;">
                <i id="inventory_add-prompt_fragment-option" style="cursor:pointer; margin-right: 50px;" class="item-sprite" title="" onclick="inventory.catalog_prompt_option_toggle(this)"></i>
                <i id="inventory_add-prompt_equipment-option" style="cursor: pointer;" class="item-sprite" title="" onclick="inventory.catalog_prompt_option_toggle(this)"></i>
            </div>
            <div style="background: rgba(0, 0, 0, 0.50); border-radius: 7px;">
                <div id="inventory_catalog_add-fragment">
                    <i id="inventory_add-fragment_main" class="inventory_catalog_add_main-item item-sprite" title=""></i>
                </div>
                <div id="inventory_catalog_add-equipment">
                    <i id="inventory_add-equipment_main" class="inventory_catalog_add_main-item item-sprite" title=""></i>
                    <div id="inventory_catalog_add-equipment_arrow">&darr;</div>
                    <div id="inventory_catalog_add-equipment_sub-items"></div>
                </div>
            </div>
            <label for="inventory_catalog_input" style="font-weight: bold; font-size: 30px; position: relative; top: 4px;">
                &times;
            </label>
            <input id="inventory_catalog_input" value="0" type="number">
            <br>
            <button id="inventory_catalog_add-button" onclick="inventory.catalog_prompt_add()">
                <translate text="inventory.add_item">Add Item</translate>
            </button>
            <br>
            <button id="inventory_catalog_cancel-button" onclick="inventory.catalog_prompt_cancel()">
                <translate text="presets_tab.cancel">Cancel</translate>
            </button>
        </div>
    </div>
</div>

<script id="startup">
    webpage.init();
</script>
</html>